<!-- 项目进度预警 -->
<template>
    <el-container class="progressWarn">
        <el-main class="mainDetails">
            <div>
                <SearchPanel title="查询条件">
                    <el-form ref="form" :model="queryParams" label-width="180px" size="mini" :inline="true" style="margin-bottom: 10px;">
                        <el-row :gutter="24">
                            <el-col :span="5">
                                <el-form-item label="省分" style="width: 100%" required>
                                    <el-cascader
                                        v-model="queryParams.province"
                                        :options="optionProvince"
                                        @change="changeProvince"
                                        :show-all-levels="false"
                                        clearable>
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="地市" style="width: 100%" required>
                                    <custom-select
                                        v-model="queryParams.city"
                                        :options="optionCity"
                                        :disabled="false"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="预警类型" style="width: 100%" required>
                                    <div style="display: flex">
                                        <el-select v-model="queryParams.ewRange" placeholder="请选择">
                                            <el-option
                                                v-for="item in dicLists['EARLY_WARNING_TYPE']"
                                                :key="item.dictId"
                                                :label="item.dictName"
                                                :value="item.dictId"
                                            />
                                        </el-select>
                                        <div style="white-space: nowrap">
                                            <span style="font-size: 12px;color: #606266;padding:0 4px 0 8px">超</span>
                                            <el-select v-model="queryParams.month" placeholder="" style="width: 60px">
                                                <el-option
                                                    v-for="item in dicLists['EXTENDED_MONTH']"
                                                    :key="item.dictId"
                                                    :label="item.dictName"
                                                    :value="item.dictId"
                                                />
                                                </el-select>
                                            <span style="font-size: 12px;color: #606266">个月</span>
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="业务类型" style="width: 100%" required>
                                    <custom-select
                                        v-model="queryParams.isNewbusiness"
                                        :options="dicLists['IS_NEWBUSINESS']"
                                        :disabled="false"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="3" style="text-align: right;padding-top: 5px">
                                <el-button size="mini" class="pms-zr-button-primary" @click="doSearch">查询</el-button>
                            </el-col>
                        </el-row>
                        <el-row :gutter="24">
                            <el-col :span="5">
                                <el-form-item label="项目类型" style="width: 100%">
                                    <custom-select
                                        v-model="queryParams.prjType"
                                        :options="dicLists['PROJ_TYPE']"
                                        :disabled="false"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="建设方式" style="width: 100%">
                                    <custom-select
                                        v-model="queryParams.buildModes"
                                        :options="dicLists['BUILD_MODES']"
                                        :disabled="false"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </SearchPanel>
                <SearchList title="查询结果" style="margin-top: 16px;">
                    <template #header-btn>
                        <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
                    </template>
                    <template #body>
                        <div style="padding:0 10px 15px 15px">
                            <MyTable
                                id="prjId"
                                ref="myTableRef"
                                :table-data="tableData"
                                :columns="colOption"
                                :col-option-enum="dicLists"
                                :is-selection="false"
                            >
                            </MyTable>
                            <pagination
                                v-if="pageParam.total > 10"
                                :total="pageParam.total"
                                :page.sync="pageParam.pageNum"
                                :limit.sync="pageParam.pageSize"
                                @pagination="doSearch"
                            />
                        </div>
                    </template>
                </SearchList>
            </div>
        </el-main>
    </el-container>
</template>

<script>
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import SysConst from '@/common/const'
import BtnConfig from "@/components/basic/btnConfig.vue";
import { getDropdownData } from '@/api/common' // 字典接口
import {msgInfoEl} from "@/utils";
import CustomSelect from "@/components/basic/customSelect.vue";
import {getCityInfo, getDictCascade, getProvinceInfo,queryExportList,asyncEarlyExport} from "@/api/progressWarn";
const btnOption = [
    { label: '导出', fun: 'derive', type: '' }
]
export default {
    name: 'ProgressWarn',
    components: {
        CustomSelect,
        BtnConfig,
        MyForm,
        SearchPanel,
        SearchList,
        MyTable,
    },
    data() {
        return {
            tableData: [], // 列表数据
            colOption:[
                { label: '整体项目编码', width: '140', prop: 'parentPrjCode'},
                { label: '项目编码', width: '140', prop: 'prjCode' },
                { label: '项目名称', width: '300', prop: 'projectName'},
                { label: '项目年份', width: '70', prop: 'prjYear' },
                { label: '省分', width: '90', prop: 'provinceName'},
                { label: '地市', width: '100', prop: 'cityName'},
                { label: '业务类型', width: '', prop: 'isNewbusiness',dicType: 'IS_NEWBUSINESS', dicProp: { label: 'dictName', value: 'dictId' }},
                { label: '项目类型', width: '100', prop: 'prjType',dicType: 'PROJ_TYPE_ALL', dicProp: { label: 'dictName', value: 'dictId' }},
                { label: '建设方式', width: '', prop: 'buildModes',dicType: 'BUILD_MODES_ALL', dicProp: { label: 'dictName', value: 'dictId' }},
                { label: '方案造价岗', width: '120', prop: 'schemeCostPost'},
                { label: '项目管理岗', width: '120', prop: 'fieldProjectManager'},
                { label: '当前节点', width: '', prop: 'nodeName'},
                { label: '当前办理人', width: '120', prop: 'person'},
                { label: '立项时间', width: '140', prop: 'appTime'},
                { label: '开工时间', width: '140', prop: 'realStartTime'},
                { label: '完工时间', width: '140', prop: 'realEndTime'},
                { label: '内验时间', width: '140', prop: 'endInternalAcceptDate'},
                { label: '结算送审时间', width: '140', prop: 'pushTime'},
                { label: '关闭时间', width: '140', prop: 'turnOffTime'},
            ], // 列表表头
            queryParams: {}, // 查询条件
            dialogForm: {}, // 弹窗里面数据
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            },
            btnOption,
            title:'添加配置规则',
            dicLists:{},
            optionProvince:[],
            optionCity:[],
        }
    },
    async created() {
        await this.initDictData();
        this.getProvince();
    },
    watch:{
        "queryParams.isNewbusiness":{
            handler(newVal) {
                // 清空项目类型下拉列表
                this.$set(this.queryParams,'prjType','')
                this.$set(this.queryParams,'buildModes','')
                // 获取项目类型下拉列表
                this.getPrjTypeSelect(newVal);
            },
        },
        "queryParams.prjType":{
            handler(newVal) {
                // 清空项目类型下拉列表
                this.$set(this.queryParams,'buildModes','')
                // 获取项目类型下拉列表
                this.getBuildModesSelect(newVal);
            },
        }
    },
    methods: {
        // 获取字典ID
        async getParentDict(val, arr) {
            let parentDict = "";
            let valArray = val.split(",");
            let parentDictArray = [];
            valArray.forEach((item) => {
                let valFind = arr.find((obj) => obj.dictId === item);
                if (valFind) {
                    parentDictArray.push(valFind.id);
                }
            });
            parentDict = parentDictArray.join(",");
            return parentDict;
        },

        async getPrjTypeSelect(val){
            let purpose = "";
            let parentDict = "";

            if (val) {
                purpose = "2";
                parentDict = await this.getParentDict(
                    val,
                    this.dicLists.IS_NEWBUSINESS
                );

            } else {
                purpose = "3";
            }

            const dictData = await this.getDictCascade(
                purpose,
                "3",
                "",
                parentDict,
                "",
                ""
            );
            if (dictData) {
                this.$set(this.dicLists,'BUILD_MODES',dictData['BUILD_MODES'])
                this.$set(this.dicLists,'PROJ_TYPE',dictData['PROJ_TYPE'])
            }
        },
        async getBuildModesSelect(val){
            let purpose = "";
            let parentDict = "";
            let dictLevel = "";

            // 项目类型有值
            if (val) {
                purpose = this.queryParams.isNewbusiness ? "2" : "4";
                parentDict = await this.getParentDict(val, this.dicLists.PROJ_TYPE);
                dictLevel = "3";
            } else {
                purpose = this.queryParams.isNewbusiness ? "2" : "3";
                if (this.queryParams.isNewbusiness) {
                    parentDict = await this.getParentDict(
                        this.queryParams.isNewbusiness,
                        this.dicLists.IS_NEWBUSINESS
                    );
                }
            }

            const dictData = await this.getDictCascade(
                purpose,
                "3",
                "",
                parentDict,
                dictLevel,
                ""
            );
            if (dictData) {
                this.$set(this.dicLists,'BUILD_MODES',dictData['BUILD_MODES'])
            }
        },
        async initDictData(){
            const dictData= await this.getDictCascade( "3",
                "3",
                "EARLY_WARNING_TYPE,IS_NEWBUSINESS,PROJ_TYPE,BUILD_MODES,EXTENDED_MONTH",
                "",
                "",
                ""
            )
            if (dictData) {
                for(let k in dictData){
                    this.$set(this.dicLists,k,dictData[k])
                    if(k==='PROJ_TYPE'){
                        this.$set(this.dicLists,'PROJ_TYPE_ALL',dictData[k])
                    }
                    if(k==='BUILD_MODES'){
                        this.$set(this.dicLists,'BUILD_MODES_ALL',dictData[k])
                    }
                }
            }
        },
        async getDictCascade(purpose, sceneId, dictKeys, parentId, levels, status) {
            let dictData = {};
            await getDictCascade({
                purpose: purpose,
                sceneId: sceneId,
                dictKeys: dictKeys,
                parentId: parentId,
                levels: levels,
                status: status,
            }).then((res) => {
                dictData = res.data;
            });
            return dictData;
        },

        // 列表按钮点击事件
        btnClick(fun, row) {
            this[fun](row)
        },
        getProvince(){
            getProvinceInfo().then((res)=>{
                if(+res.code === 200){
                    this.optionProvince=res.data;
                }
            })
        },
        derive(){
            if(this.checkSearch()){
                return;
            }
            const params={
                province: this.queryParams.province[1],
                cityList:this.queryParams.city?this.queryParams.city.split(','):[],
                isNewbusinessList:this.queryParams.isNewbusiness ? this.queryParams.isNewbusiness.split(',') :[],
                prjTypeList:this.queryParams.prjType? this.queryParams.prjType.split(',') : [],
                buildModesList:this.queryParams.buildModes ? this.queryParams.buildModes.split(','):[],
                earlyWarningType:this.queryParams.ewRange,
                month:this.queryParams.month,
                pageNum: this.pageParam.pageNum,
                pageSize: this.pageParam.pageSize,
            }
            asyncEarlyExport(params).then((res)=>{
                if (+res.code !== 200) {
                    return Promise.reject(res)
                }
                this.$message.success(res.message)
            })
        },
        changeProvince(code){
            this.$set(this.queryParams,'city',"")
            this.optionCity=[];
            const province= code.length>0?code[code.length-1]:'';
            getCityInfo(province).then((res)=>{
                if(+res.code === 200 && res.data.length > 0){
                    this.optionCity = res.data.map((item) => {
                        return { dictId: item.AREAID, dictName: item.AREANAME };
                    });
                }
            })
        },
        checkSearch(){
            console.log(this.queryParams.province)
            if( !(this.queryParams.province && this.queryParams.province.length > 0)){
                return msgInfoEl({
                    type:'warning',
                    message:'请选择省分'
                })
            }
            if(!this.queryParams.city){
                return msgInfoEl({
                    type:'warning',
                    message:'请选择地市'
                })
            }
            if(!this.queryParams.ewRange){
                return msgInfoEl({
                    type:'warning',
                    message:'请选择预警类型'
                })
            }
            if(!this.queryParams.month){
                return msgInfoEl({
                    type:'warning',
                    message:'请选择预警类型超出月数'
                })
            }
            if(!this.queryParams.isNewbusiness){
                return msgInfoEl({
                    type:'warning',
                    message:'请选择业务类型'
                })
            }
            return false;
        },
        doSearch(item){
            if(this.checkSearch()){
                this.tableData=[];
                return;
            }
            const params={
                province: this.queryParams.province[1],
                cityList:this.queryParams.city?this.queryParams.city.split(','):[],
                isNewbusinessList:this.queryParams.isNewbusiness ? this.queryParams.isNewbusiness.split(',') :[],
                prjTypeList:this.queryParams.prjType? this.queryParams.prjType.split(',') : [],
                buildModesList:this.queryParams.buildModes ? this.queryParams.buildModes.split(','):[],
                earlyWarningType:this.queryParams.ewRange,
                month:this.queryParams.month,
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
            }
            console.log(params)
            queryExportList(params).then(res => {
                if (+res.code !== 200) {
                    this.tableData=[];
                    return Promise.reject(res)
                }
                this.tableData = res.data.records
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.progressWarn{
    padding: 15px;
}
.el-select-dropdown__item {
    width: 100%;
}
</style>

